<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素遍历</title>
		<!-- 元素遍历：用于DOM树中遍历元素【理解：针对元素嵌套，父子级】
		 children()			功能：获取匹配元素集合中每个元素的子元素
		 parent()			功能：获取匹配元素集合中每个元素的父元素
		 
		 siblings()			功能：获取匹配元素集合中每个元素的所有兄弟元素
			
		 next()				功能：获取匹配元素集合中每个元素的下一个兄弟元素
		 prev()				功能：获取匹配元素集合中每个元素的上一个兄弟元素

		each()				功能：遍历匹配元素的集合--遍历所有子元素
							语法糖：each(function(index,element{
								$(element).text(‘${index}’)
								注意：打印遍历的值，不可以使用单双引号+拼接
								功能：获取到的元素，遍历元素内容
							}))
							index：下标  element：元素 形参
		 -->
		 <style>
			.container{
			border: 1px solid #333333;
				padding: 10px;
				margin: 10px;	
			} 
			.box{
				background-color: aqua;
				padding: 10px;
				margin: 10px;
			}
			 button{
				 margin: 5px;
			 }
			 
			 
			 
		 </style>
		 <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- html  div.container 父级 6个div.box 每个#box1  子级
				   6个按钮
			css：	.container添加样式  边框1px、内外边距10px
					.box添加样式    背景色、内外边框10px
					button添加样式	外边距：5px
					
		    jq:   引入
		 -->
		 
		<div class="container">
			
		
		 <div class="box" id="box1">盒子1</div>
		 <div class="box" id="box2">盒子2</div>
		 <div class="box" id="box3">盒子3</div>
		 <div class="box" id="box4">盒子4</div>
		 <div class="box" id="box5">盒子5</div>
		 <div class="box" id="box6">盒子6</div>
		 </div>
			<button id="gc">获取子元素</button>
			<button id="gp">获取父元素</button>
			<button id="gs">获取兄弟元素</button>
			<button id="gn">获取下一个兄弟元素</button>
			<button id="gr">获取上一个兄弟元素</button>
			<button id="loop">遍历元素</button>
			<script>
			/* 1点击 获取子元素 按钮 实现.container下所有元素添加背景色*/	
				$("#gc").click(function(){
					//通过  父找子 函数
					$(".container").children().css("background-color","#ff0");
				});
				/* 2.点击 获取父元素 按钮  实现.container 添加背景色 */
				/*3.点击 获取兄弟元素 按钮 实现#box4 字体颜色不变，其他变色  */
				/*4.点击 获取下一个兄弟元素 按钮 实现 #box4 下一个兄弟，添加背景色  */
				/*5.点击 获取上一个兄弟元素 按钮 实现#box6 上一个兄弟，添加效果  
															圆,背景图,背景色,盒子阴影
															*/
					$("#gp").click(function(){
						//通过  父找子 函数
						$("#box1").parent().css("background-color","aqua");
					});									   
						$("#gs").click(function(){
							//通过  父找子 函数
							$("#box2").siblings().css("background-color","#aaaaff");
						});		
						$("#gn").click(function(){
							//通过  父找子 函数
							$("#box4").next().css("background-color","#ff9f2a");
						});	
						$("#gr").click(function(){
							//通过  父找子 函数
							$("#box6").prev().css({
							"width":"100px",
							"height":"100px",
							"background-color","#ff0"),
							"border-radius":"50%",
							"background-image":"url(../img/11.gif)",
							"box-shadow":"5px 5px 10px #ff0",
							"background-size":"100% 100%",
							"font-size":"0"
						});	
						$("#loop").click(function(){
							//通过  父找子 函数
							$(".container").each().css("background-color","#ff0");
						});								
			</script>
			 </body>
			
</html>